<template>
  <div class="choiceNode" v-loading="loading">
    <div class="choiceNodeMain flexb">
      <div class="label">{{$t('public.currentNode')}}</div>
      <el-select
        class="nodeSelect"
        v-model="nodeChecked.url"
        @change="listenNodeChange"
        :style="$store.state.app.language === 'en' ? 'width: 650px;' : 'width: 680px;'">
        <span slot="prefix"
        class="nodeWebsite"
        style="float: left;text-align:left;padding-left:11px;">
          {{ nodeChecked.url }}
        </span>
        <span slot="prefix" class="fl checkArea">{{ nodeChecked.area }}</span>
        <span slot="prefix" class="nodeDelay fl" v-if="nodeChecked.tip === 0">
          {{ nodeChecked.time }}ms {{$t('public.lowLatency')}}
        </span>
        <span slot="prefix" class="mediumLatency fl" v-if="nodeChecked.tip === 1">
          {{ nodeChecked.time }}ms {{$t('public.mediumLatency')}}
        </span>
        <span slot="prefix" class="highLatency fl" v-if="nodeChecked.tip  === 2">
          {{ nodeChecked.time }}ms {{$t('public.highLatency')}}
        </span>
        <span slot="prefix" class="highLatency fl" v-if="nodeChecked.tip === 3">
          {{$t('public.timeOut')}}
        </span>
        <span slot="prefix"
          class="nodeRegion"
          style="margin-right: -11px;">
          {{$store.state.app.scatter.chain.toUpperCase()}}{{$t('bosChain.chain')}}
        </span>
        <el-option
          :class="{'nodeCheckedClass' : item.checked}"
          v-for="item in options"
          :key="item.ip"
          :label="item.url"
          :value="item.url"
          :disabled="item.disabled">
          <span class="nodeWebsite">
            {{ item.url }}
          </span>
          <span class="area">{{ item.area }}</span>
          <span class="nodeDelay" v-if="item.tip === 0">
            {{ item.time }}ms {{$t('public.lowLatency')}}
          </span>
          <span class="mediumLatency" v-if="item.tip === 1">
            {{ item.time }}ms {{$t('public.mediumLatency')}}
          </span>
          <span class="highLatency" v-if="item.tip === 2">
            {{ item.time }}ms {{$t('public.highLatency')}}
          </span>
          <span class="highLatency" v-if="item.tip === 3">
            {{$t('public.timeOut')}}
          </span>
          <span class="nodeDelay" v-if="item.tip === -1">
            <i class="el-icon-loading"></i>
          </span>
          <span class="checked fr" :class="{'visibility': !item.checked}">
            <i class="iconfont icon-dagou"></i>
          </span>
          <span class="nodeRegion">
            {{$store.state.app.scatter.chain.toUpperCase()}}{{$t('bosChain.chain')}}
          </span>
        </el-option>
      </el-select>
    </div>
    <div :class="{'hidden' : !comfirmShow}">
      <p style="text-align: center;margin-top: 20px;">{{$t('public.switchNodeTip')}}</p>
      <div class="flexc">
        <div class="nodeComfirm"
          @click="handleChangeNode">
          {{$t('public.comfirm')}}
        </div>
        <div class="nodeCancel" style="margin-left: 20px;" @click="handleCancelNode">{{$t('public.cancel')}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import { EosModel } from '../utils/eos';

export default {
  data() {
    return {
      options: [], // 选择框列表值
      comfirmShow: false, // 确定节点按钮
      loading: true,
      nodeChecked: {
        url: '',
        host: '',
        protocol: '',
        port: '',
        area: '', // 选中地区
        time: '', // 选中时间
        tip: -1, // 选中延迟状态
      },
    }
  },
  props: {
    nodeVisible: Boolean,
  },
  created() {
    this.handleGetNodeInfo();
  },
  mounted() {
  },
  watch: {
    nodeVisible: function change(val) {
      if (val) {
        this.handleGetNodeInfo();
        this.comfirmShow = false;
      }
    }
  },
  methods: {
    // 选择节点
    listenNodeChange(val) {
      const item = this.options.find(v => v.url === val);
      const index = this.options.findIndex(v => v === item);
      // this.options.forEach((v) => {
      //   const vv = v;
      //   vv.checked = false;
      // });
      const opt = this.options[index];
      // opt.checked = true;
      this.nodeChecked = {
        url: item.url,
        host: item.host,
        protocol: item.protocol,
        port: item.port,
        area: opt.area, // 选中地区
        time: opt.time, // 选中时间
        tip: opt.tip, // 选中延迟状态
      };
      const chain = this.$store.state.app.scatter.chain || 'eos';
      if (this.nodeChecked.host === this.$store.state.app.nodeChecked[chain].host) {
        this.comfirmShow = false;
        return
      }
      this.comfirmShow = true;
    },
    // 获取节点
    handleGetNodeInfo() {
      this.loading = true;
      this.$http.get('/common/getNodeList').then((res) => {
        this.loading = false;
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        const nodeList = res.nodeList;
        const items = [];
        const storeNode = {};
        const chain = this.$store.state.app.scatter.chain || 'eos';
        const storeNodeApp = this.$store.state.app.nodeChecked[chain];
        nodeList.forEach((vv) => {
          const v = vv;
          v.checked = false;
          v.time = '';
          v.tip = -1;
          items.push(v);
          if (storeNodeApp.host === v.host) {
            storeNode.time = v.time;
            storeNode.url = v.url;
            storeNode.tip = v.tip;
            v.checked = true;
            storeNode.port = v.port;
            storeNode.host = v.host;
            storeNode.protocol = v.protocol;
            storeNode.area = v.area;
          }
        })
        this.options = items;
        this.handleGetNodeTime();
        this.nodeChecked = storeNode;
        this.loading = false;
      });
    },
    // 计算节点请求时间
    handleGetNodeTime() {
      const chain = this.$store.state.app.scatter.chain || 'eos';
      const storeNodeApp = this.$store.state.app.nodeChecked;
      this.options.forEach((vv) => {
        const nodeChecked = storeNodeApp[chain];
        const v = vv;
        let time = new Date().getTime();
        let tip = 3;
        axios.get(`${v.url}/v1/chain/get_info`, {
          timeout: 5500,
        }).then(() => {
          time = new Date().getTime() - time;
          // tip 0低延迟 1一般延迟 2高延迟 3超时
          if (time < 1000) {
            tip = 0;
          }
          if (time >= 1000 && time <= 5000) {
            tip = 1;
          }
          if (time > 5000) {
            tip = 2;
          }
          v.time = time;
          v.tip = tip;
          if (nodeChecked.host === v.host) {
            nodeChecked.time = v.time;
            nodeChecked.tip = v.tip;
            this.nodeChecked = nodeChecked;
            this.$set(storeNodeApp, chain, nodeChecked);
            this.$set(storeNodeApp, 'timer', new Date().getTime());
          }
        }).catch(() => {
          v.time = 10000;
          v.tip = 3;
          if (nodeChecked.host === v.host) {
            nodeChecked.time = v.time;
            nodeChecked.tip = v.tip;
            this.nodeChecked = nodeChecked;
            this.$set(storeNodeApp, chain, nodeChecked);
            this.$set(storeNodeApp, 'timer', new Date().getTime());
          }
        });
      });
    },
    // 更换节点
    handleChangeNode() {
      const chain = this.$store.state.app.scatter.chain || 'eos';
      const nodeChecked = this.$store.state.app.nodeChecked;
      nodeChecked[chain] = this.nodeChecked;
      nodeChecked.timer = new Date().getTime().toString();
      this.$store.dispatch('setNodeChecked', nodeChecked).then(() => {
        setTimeout(() => {
          EosModel.chainNodeInit(chain);
          location.reload();
        }, 200);
        this.comfirmShow = false;
        this.$emit('listenCancelNode');
      });
    },
    // 取消更换节点
    handleCancelNode() {
      this.$emit('listenCancelNode');
    },
  },
}
</script>
<style lang="scss" scoped>
@import "@/assets/css/variables.scss";
.el-select .el-input.is-focus .el-input__inner, .el-select .el-input__inner:focus {
  border-color: #BBB;
}
.el-popper[x-placement^="bottom"] {
  border-radius: 0;
  margin-top: 0;
}
.el-dialog__body {
  padding-bottom: 40px;
}
.el-popper {
  border: 1px solid #BBB;
  border-top: none;
  /deep/ .popper__arrow {
    display: none!important;
  }
}
.el-select-dropdown__item.selected, .el-select-dropdown__item.selected.hover {
  font-weight: normal!important;
}
.el-select-dropdown__item {
  padding-left: 15px !important;
}
.choiceNode {
  width: 750px;
  font-family: Roboto !important;
  /deep/ .el-input__inner {
    font-family: Roboto !important;
    color: #101010;
    border-radius: 0;
    padding: 0 15px;
  }
  /deep/ .el-input__prefix {
    width: 92%;
  }
  .nodeSelect {
    width: 675px;
    line-height: 40px;
    cursor: pointer;
  }
  .nodeComfirm {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #278EDA;
    padding: 4px 8px;
    margin-top: 20px;
    color: #278EDA;
    cursor: pointer;
    &:hover {
      background: #278EDA;
      color: #fff;
    }
  }
  .nodeCancel {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #999;
    padding: 4px 8px;
    margin-top: 20px;
    color: #999;
    cursor: pointer;
    &:hover {
      border-color: #278EDA;
      color: #278EDA;
    }
  }
}
.nodeWebsite {
  width: 236px;
  color: #101010;
}
.nodeDelay {
  color: #67c269;
}
.mediumLatency {
  color: #FF9800;
}
.highLatency {
  color: #E51C23;
}
.nodeRegion {
  float: right;
  color: #BBB;
  margin-right: -5px;
}
.area {
  display: inline-block;
  width: 135px;
  color: #BBB;
}
.checkArea {
  width: 138px;
  text-align: left;
}
.visibility {
  visibility: hidden;
}
.checked {
  margin-top: -5px;
  margin-right: -28px;
  color: #67c269;
  i {
    font-size: 50px;
  }
}
.el-select-dropdown__item {
  .nodeWebsite {
    display: inline-block;
    width: 220px;
  }
}
.nodeCheckedClass {
  background-color: #e9f4fb !important;
}
.theme-1B1D27 {
  .nodeWebsite {
    color: #BBB;
  }
  .nodeCheckedClass {
    background-color: transparent !important;
  }
}

</style>
